<script setup lang="ts">
import { editInstance } from '@/api/docker';
import type { Instance } from '@/api/docker/type';
import type { FormInstance } from 'element-plus';
import { onMounted, ref, type Ref } from 'vue';

const ruleFormRef = ref<FormInstance>()
const instance = defineModel('instance') as Ref<Instance>;
const show =  defineModel('show') as Ref<boolean>;

onMounted(() => {

})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            editInstance(instance.value).then(() => {
                show.value = false;
            })
        } else {
            console.log('error submit!')
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<template>
    <div>
        <el-drawer v-model="show" title="修改" :direction="'rtl'">
            <el-form ref="ruleFormRef" label-width="auto" :model="instance" style="max-width: 600px">
                <el-form-item label="实例名" >
                    <el-input v-model="instance.name" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<style lang="scss" scoped>

</style>